<script setup lang="ts">
import useFetch from "@/hooks/useFetch";
import Taro, { useRouter } from "@tarojs/taro";

import Page from "@/components/common/Page.vue";
import ByIcon from "@/components/ui/ByIcon.vue";
import ByText from "@/components/ui/ByText.vue";
import BySquare from "@/components/ui/BySquare.vue";
import ByButton from "@/components/ui/ByButton.vue";
import IndentationBar from "@/components/common/IndentationBar.vue";

import ApiActivity from "@/api/activity";
import { TActivity } from "@/global";

const { params } = useRouter<{
  actId: `${number}`;
  sn: string;
  name: string;
}>();

// 查询活动详情
const { data } = useFetch<TActivity>(ApiActivity.activityDetailConsumer, {
  defaultParams: { id: +params.actId },
  afterFetch: (res: any) => res.detail,
});
</script>

<template>
  <Page hidden-header-bg footer-sticky>
    <template #footer>
      <view class="p-3 text-center">
        <ByButton
          class="w-1/2 bg-dark"
          @tap="Taro.switchTab({ url: '/pages/coupon/index' })"
          >查看票券</ByButton
        >
        <view class="safe-footer" />
      </view>
    </template>

    <view class="mt-5 w-[600px] mx-auto">
      <view class="bg-primary px-4 py-2 rounded-t-xl">
        <view class="text-center text-lg mb-1 text-white">购买成功</view>
        <image
          class="w-full"
          mode="widthFix"
          :src="data?.poster_img || data?.title_img"
        />
      </view>

      <IndentationBar />

      <view class="flex items-center py-2 bg-primary px-4 py-2 rounded-b-xl">
        <view class="flex-auto mr-2">
          <ByText :line-clamp="2" class="text-xl text-white">
            {{ data?.title }}
          </ByText>

          <view class="mt-2 pt-1 text-xs border-t-1 border-white text-white/60">
            <view class="flex">
              <text class="flex-none w-[3.5em]">权益包</text>
              <view class="flex-auto">
                {{ params.name }}
              </view>
            </view>

            <view class="flex mt-1">
              <text class="flex-none w-[3.5em]">地点</text>
              <view class="flex-auto">
                {{ data?.address }}
              </view>
            </view>
          </view>
        </view>

        <BySquare
          class="flex-none border-1 border-[#965c2d] rounded-full"
          :size="140"
        >
          <ByIcon name="Complate" :size="120" class="text-[#965c2d]" />
        </BySquare>
      </view>

      <view class="mt-6 rounded-xl overflow-hidden">
        <ad-custom
          unit-id="adunit-bdee55e683e49104"
          bindload="adLoad"
          binderror="adError"
          bindclose="adClose"
        />
      </view>
    </view>
  </Page>
</template>
